<template>
  <van-nav-bar title="重置密码" left-text="" left-arrow @click-left="onClickLeft" />
  <br>
  <van-tabs v-model:active="active" type="line">
    <van-tab title="1.验证手机号码">
        <van-cell-group inset>
          <van-field v-model="phone" center clearable left-icon="phone-o" label="手机号" placeholder="请输入手机号码">

          </van-field>
          <van-field v-model="code" center clearable left-icon="envelop-o" label="验证码" placeholder="输入短信验证码">
            <template #button>
              <van-button size="small" type="primary" @click="SendCode">发送验证码</van-button>
            </template>
          </van-field>
        </van-cell-group>
        <van-button id="next" round block type="primary" native-type="submit" @click="next">
          下一步
        </van-button>
    </van-tab>

      <van-tab title="2.设置新密码">
        <van-cell-group inset>
          <van-field v-model="new_pwd" center clearable left-icon="goods-collect-o" label="新密码"
            placeholder="请设置6-20位新的登录密码">

          </van-field>
          <van-field v-model="new_pwd_con" center clearable left-icon="goods-collect-o" label="确认新密码"
            placeholder="请再次输入新的登陆密码">

          </van-field>
        </van-cell-group>
        <van-button id="next" round block type="primary" native-type="submit">
          提交
        </van-button>
      </van-tab>
  </van-tabs>


</template>

<script setup>
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
const onClickLeft = () => history.back()
let phone = ref()
let code = ref()
let new_pwd = ref()
let new_pwd_con = ref()
let active = ref(0)

function next(){
  active.value = 1
}

function SendCode(){
  axios({
    method:'post',
    url:'http://127.0.0.1:8000/sendcode/',
    data:{
      phone:phone.value
    }
  }).then(res=>{
    console.log(res.data)
  }).catch(err=>{
    console.log(err)
  })
}


</script>
<style scoped>
#next {
  margin-top: 30px;
  width: 90%;
  margin-left: 15px;
}

</style>
